<!-- 配送服务 -->
<template>
	<view class="container">
		<text class="title">配送服务</text>
		<view class="list">
			<view class="list-item border-bottom-1px">
				<text class="label">是否支持配送：</text>
				<radio-group class="radio-group m-l2" @change="radioChange" v-for="(item, index) in items" :key="item.value">
					<label>
						<radio class="radio" :value="item.value" :checked="item.checked" color="#FE3333" />
						<text class="text">{{item.name}}</text>
					</label>
				</radio-group>
			</view>
			<view class="list-item half">
				<text class="label">配送规则：</text>
			</view>
			<radio-group class="radio-group" @change="rulesRadioChange" v-for="(item, index) in rules" :key="item.value">
				<label class="list-item border-bottom-1px">
					<radio class="radio" :value="item.value" :checked="item.checked" color="#FE3333" />
					<text class="text">{{item.name}}</text>
				</label>
			</radio-group>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	const items = ref([{
			value: '1',
			name: '是',
			checked: true
		},
		{
			value: '0',
			name: '否',
			checked: false
		}
	]);

	const radioChange = (e) => {
		const value = e.detail.value;

		items.value.forEach(item => {
			item.checked = item.value === value;
		});
	}
	
	const rules = ref([{
			value: '1',
			name: '500m以内免运费',
			checked: true
		},
		{
			value: '2',
			name: '订单金额大于500元免运费',
			checked: false
		}
	]);
	
	const rulesRadioChange = (e) => {
		const value = e.detail.value;
	
		rules.value.forEach(item => {
			item.checked = item.value === value;
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 25rpx 0;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			padding-left: 4rpx;
		}
	}

	.list {
		background-color: white;
		border-radius: 20rpx;
		padding-left: 30rpx;
		margin-top: 30rpx;

		&-item {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			padding-right: 40rpx;
			box-sizing: border-box;

			&.half {
				height: auto;
				padding-top: 20rpx;
			}

			&.right-icon::before {
				position: absolute;
				top: 50%;
				right: 10rpx;
				transform: translateY(-50%);
				font-family: 'iconfont';
				content: '\e61a';
				font-size: 24rpx;
				color: #222222;
			}

			.label {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #222222;
			}
		}

		.radio-group {
			display: flex;
			align-items: center;

			.radio {
				transform: scale(0.8);
				margin-left: -4rpx;
			}

			.text {
				font-size: 28rpx;
				color: #222222;
				margin-left: 4rpx;
			}
		}
	}
</style>